<template>
  <div style="margin: 20px">
    <el-row>
      <el-col :span="12">
        <bar-chart :chart-data="chartData[0]" :width="sizes[0].width" :height="sizes[0].height"></bar-chart>
      </el-col>
      <el-col :span="12">
        <bar-chart :chart-data="chartData[1]" :width="sizes[0].width" :height="sizes[0].height"></bar-chart>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import BarChart from "../../../components/Charts/BarChart";

  export default {
    name: 'Bar',
    components: {BarChart},
    data() {
      return {
        info: null,
        sizes: [
          {
            width: '100%',
            height: '300px'
          }
        ],
        chartData: [
          {
            type: 'bar',
            title: '服装销售排行榜',
            xAxis: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            dataList: [5, 20, 36, 10, 10, 20]
          },
          {
            type: 'line',
            title: '手机销售排行榜',
            xAxis: ['华为', 'vivo', '一加', '小米', 'oppo', '其他'],
            dataList: [5, 20, 36, 10, 10, 20]
          },
        ]

      }
    },
    methods: {
      handleClick(message) {
        this.$message(message);
      },
      showInfo(info) {
        this.$alert(info, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            });
          }
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
